<!--form-create测试-->
<template>
 <div>
      <div>测试form-create分组以及校验</div>
  <!--   业务信息-->
   <div class="business-info">
     <div class="title">业务信息：</div>
     <div>业务编号：{{formDate.businessId}}</div>
     <div>业务名称：{{formDate.businessName}}</div>
   </div>
<!--步骤条   -->
   <div class="steps">
     <div v-for="i in 3" class="step">
       <div class="icon" @click="currentIndex=i">{{i}}</div>
       <div class="deliver" v-if="i!==3"><div class="line"></div></div>
     </div>
   </div>
<!--  表单内容-->
     <div>
       <FormCreateMobile
           :rule="dynamicColumn"
           :option="option"
           v-model="formDate"
           v-model:api="refDom"
           class="custom-form"
       >
       </FormCreateMobile>
     </div>
<!--   按钮操作-->
   <van-button v-if="currentIndex===3">表单操作</van-button>
 </div>
</template>

<script setup>
import {ref,computed,onMounted} from 'vue'
import FormCreateMobile from "@form-create/vant";
import {useCreateForm} from "./useCreateForm.ts";
import {flattenObject, getNestedValue} from "../utils/index.ts";
//请求数据的方法
const initForm=async ()=>{
  return  await Promise.resolve({
    businessId:'业务id',
    businessName:'mock测试业务',
    senderInfo:{
      userId:'s0001',
      userName:'寄件人',
      phoneNumber:'15123412222',
      address:'上海市长宁区遵义路仙霞西路',
      sendStart:'2024-11-22',
      sendEnd:'2024-12-31',
      //委托代收
      entrustedCollection:false,
    },
    parcelInfo:{
      category:'food',
      detail:'地方特产',
      weight:'20kg',
      volume:'10m³',
      fragile:false
    },
    receiverInfo:{
      userId:'r0001',
      userName:'收件人',
      phoneNumber:'14192321512',
      address:'上海市宝山区爱辉路',
      receiveState:false,
      receivDate:""
    },
    orderInfo:{
      createDate:'2024-11-30',
      expectedDeliveryDate:'2024-12-31',
      realDeliveryDate:'2024-12-24',
      totalAmount:321.42,
      paymentStatus:'waiting',
      orderStatus:'opening'
    }
  }).then(res=>res)
}
const originColumns= [
  {
    type: 'subForm',
    field: 'senderInfo',
    title: '寄件人信息',
    props: {
      rule: [
        // userId:'s0001',
        // userName:'寄件人',
        // phoneNumber:'15123412222',
        // address:'上海市长宁区遵义路仙霞西路',
        // sendStart:'2024-11-22',
        // sendEnd:'2024-12-31',
        {
          type: 'field',
          field: 'userId',
          title: '编号',
          hidden:true,
          props:{
            readonly:true
          }
        },
        {
          type: 'field',
          field: 'userName',
          title: '姓名',
          props:{
            readonly:true
          }
        },
        {
          type: 'field',
          field: 'phoneNumber',
          title: '联系电话',
          validate: [
            { required: true, message: '请输入手机号', trigger: 'change' }
          ],
          placeholder:'请输入'
        },
        {
          type: 'field',
          field: 'address',
          title: '地址',
          props:{
            placeholder:'请输入'
          },
          validate: [
            { required: true, message: '请输入手机号', trigger: 'change' }
          ],
        },
        {
          type: 'datePicker',
          field: 'sendStart',
          title: '发货时间',
          props:{
            title:'请选择发货时间',
            isLink:true,
            columnsType:['year','month','day'],
            placeholder:'请选择',
          },
          validate: [
            { required: true, message: '请选择发货时间', trigger: 'change' }
          ],
        }
      ]
    },
    pageIndex:1,
  },
  {
    type: 'subForm',
    field: 'parcelInfo',
    title: '包裹信息',
    hidden:computed(()=>{
      return !getNestedValue(formDate.value,'receiverInfo.receiveState')
    }),
    props: {
      rule: [
        {
          type: 'select',
          field: 'category',
          title: '类型',
          props:{
            placeholder:'请选择',
            options:[
              { text: '食物', value: 'food' },
              { text: '日用品', value: 'riyong' },
              { text: '水产', value: 'shuichan' },
              { text: '母婴用品', value: 'muying' },
              { text: '厨具', value: 'chuju' },
            ]
          },
          validate: [
            { required: true, message: '请选择包裹类型', trigger: 'change' }
          ]
        },
        {
          type: 'field',
          field: 'contactPhone',
          title: '联系电话',
          props:{
            placeholder:'请输入',
          },
          validate: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
          ]
        },
        {
          type: 'field',
          field: 'detail',
          title: '包裹详情',
          props:{
            placeholder:'请输入',
          },
          validate: [
            { required: true, message: '请输入包裹详情', trigger: 'blur' }
          ]
        },
        {
          type: 'field',
          field: 'weight',
          title: '净重',
          props:{
            placeholder:'请输入',
          },
          validate: [
            { required: true, message: '请输入净重', trigger: 'blur' }
          ]
        },
        {
          type: 'field',
          field: 'volume',
          title: '体积',
          props:{
            placeholder:'请输入',
          },
          validate: [
            { required: true, message: '请输入体积', trigger: 'blur' }
          ]
        },
        {
          type: 'select',
          field: 'fragile',
          title: '是否为易碎物品',
          props:{
            placeholder:'请选择',
            options:[
              { text: '否', value: false },
              { text: '是', value: true },
            ]
          },
          validate: [
            { required: true, message: '请选择是否为易碎物品', trigger: 'change' }
          ]
        },
      ]
    },
    pageIndex:1,
  },
  {
    type: 'subForm',
    field: 'receiverInfo',
    title: '收件人信息',
    display:false,
    props: {
      rule: [
        // userId:'r0001',
        // userName:'收件人',
        // phoneNumber:'14192321512',
        // address:'上海市宝山区爱辉路',
        // receivDate:""
        {
          type: 'field',
          field: 'userId',
          title: '编号',
          hidden:true,
          props:{
            readonly:true
          }
        },
        {
          type: 'field',
          field: 'userName',
          title: '姓名',
          props:{
            readonly:true
          }
        },
        {
          type: 'field',
          field: 'phoneNumber',
          title: '联系电话',
          validate: [
            { required: true, message: '请输入手机号', trigger: 'change' }
          ],
          placeholder:'请输入'
        },
        {
          type: 'field',
          field: 'address',
          title: '地址',
          props:{
            placeholder:'请输入'
          },
          validate: [
            { required: true, message: '请输入手机号', trigger: 'change' }
          ],
        },
        {
          type: 'select',
          field: 'receiveState',
          title: '是否已收到货',
          props:{
            placeholder:'请选择',
            options:[
              { text: '否', value: false },
              { text: '是', value: true },
            ]
          },
          validate: [
            { required: true, message: '请选择是否为易碎物品', trigger: 'change' }
          ]
        },

        {
          type: 'datePicker',
          field: 'receivDate',
          title: '收货时间',
          props:{
            title:'请选择发货时间',
            isLink:true,
            columnsType:['year','month','day'],
            placeholder:'请选择',
          },
          validate: [
            { required: true, message: '请选择发货时间', trigger: 'change' }
          ],
        }
      ]
    },
    pageIndex:2,
  },
  {
    type: 'subForm',
    field: 'orderInfo',
    display:false,
    title: '订单信息',
    props: {
      rule: [
        {
          type: 'datePicker',
          field: 'createDate',
          title: '订单创建时间',
          props:{
            title:'请选择订单创建时间',
            isLink:true,
            columnsType:['year','month','day'],
            placeholder:'请选择',
          },
          validate: [
            { required: true, message: '请选择发货时间', trigger: 'change' }
          ],
        },
        {
          type: 'datePicker',
          field: 'expectedDeliveryDate',
          title: '预计到货时间',
          props:{
            title:'请选择订单创建时间',
            isLink:true,
            columnsType:['year','month','day'],
            placeholder:'请选择',
          },
          validate: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
        },
        {
          type: 'input',
          field: 'realDeliveryDate',
          hidden:computed(()=>{
            return !getNestedValue(formDate.value,'receiverInfo.receiveState')
          }),
          title: '实际到货时间',
        },
        {
          type: 'field',
          field: 'totalAmount',
          title: '总金额',
          hidden:computed(()=>{
            return !getNestedValue(formDate.value,'receiverInfo.receiveState')
          }),
          props:{
            placeholder:'请输入',
          },
          validate: [
            { required: true, message: '请输入总金额', trigger: 'blur' }
          ]
        },
        {
          type: 'select',
          field: 'paymentStatus',
          title: '支付状态',
          props:{
            placeholder:'请选择',
            options:[
              { text: '待付款', value: 'waiting' },
              { text: '付款中', value: 'paying' },
              { text: '已付款', value: 'payed' },
              { text: '退款中', value: 'refund' },
              { text: '已退款', value: 'refunded' },
            ]
          },
          validate: [
            { required: true, message: '请选择支付状态', trigger: 'change' }
          ]
        },
        {
          type: 'select',
          field: 'orderStatus',
          title: '订单状态',
          props:{
            placeholder:'请选择',
            options:[
              { text: '进行中', value: 'opening' },
              { text: '重新发起', value: 'retry' },
              { text: '撤销中', value: 'quash' },
              { text: '已完成', value: 'completed' },
              { text: '已作废', value: 'deprecated' },
            ]
          },
          validate: [
            { required: true, message: '请选择支付状态', trigger: 'change' }
          ]
        },
      ]
    },
    pageIndex:3,
  }
]
const {columns, formDate,option}= useCreateForm(originColumns ,initForm)
const currentIndex=ref(1)
const refDom=ref()
const dynamicColumn=computed(()=>{
  return columns.value.map((col=>{
    if(col.pageIndex!==currentIndex.value){
      col.display=false;
    }else{
      col.display=true;
    }
    return col;
  }))
})
</script>

<style scoped lang="scss">
:deep(.van-form){
  background-color: #f7f7f7;
  .van-form:last-of-type{
    margin-bottom: 40px;
  }
}
:deep(.custom-form){
  >.van-row>.van-col>.van-cell:last-of-type>.van-cell__title:first-child{
    font-size: 18px;
    font-weight: bolder;
  }
}
.business-info{
  font-size: 14px;
  font-weight: normal;
  padding: 16px;
  line-height: 20px;
  .title{
    font-size: 18px;
    font-weight: bolder;
  }
}
.steps{
  display: flex;
  justify-content: center;
  align-items: center;
  .step{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height:32px;
    //border:1px solid red;
    .icon{
      display: inline-block;
      width:32px;
      height:32px;
      line-height: 32px;
      white-space: nowrap;
      color:#113969;
      border-radius: 50%;
      border:1px solid #918f8f;

    }
    .deliver{
      //border:1px solid blue;
      position: relative;
      flex:1;
      .line{
        min-width: 180px;
        border-top:1px dashed #000000;
        margin:0 8px;
      }
    }

  }
}
</style>
